<template>
    <div class="indexDetail" v-if="data.type">
        <div class="top">
            <div>标题：{{ data.title }}</div>
            <div>类型：{{ data.type }}</div>
            <el-button type="primary" @click="$router.back()">返回</el-button>
            <el-button type="primary" @click="refresh">刷新缓存</el-button>
        </div>
        <div class="banner">
            <bannerList :list="data.banners" :isType="false" title="轮播图" @editBanner="editBanner" :type="'banners_' + data.type"/>
        </div>
        <div class="banner">
            <bannerList :list="data.menus" :isType="false" title="菜单项" @editBanner="editBanner" :type="'menus_' + data.type"/>
        </div>
        <div class="box">
            <indexList :list="data.list" :prop="prop"/>
        </div>
    </div>
</template>

<script>
    import { getIndexDetail, refreshIndexDetail } from '@/api/home'
    import bannerList from '@/components/banner/bannerList.vue'
    import indexList from '@/components/index/indexList.vue'
    export default {
        components : {
            bannerList,
            indexList
        },
        data() {
            return {
                data : {},
                prop : {
                    homeId : 'home.homeId',
                    type : 'home.type',
                    title : 'home.title',
                    showList : true
                }
            }
        },
        created(){
            this.getData()
        },
        methods : {
            getData(){
                getIndexDetail(this.$route.query.id).then(res => {
                    if(res.code == 200){
                        this.data = res.data
                    }
                })
            },
            editBanner(list, data){
                for (let i = 0; i < list.length; i++) {
                    if(list[i].bannerId == data.bannerId){
                        list.splice(i, 1, data)
                        return
                    }
                }
                list.push(data)
            },
            refresh(){
                refreshIndexDetail(this.$route.query.id).then(res => {
                    if(res.code == 200){
                        this.getData()
                        this.$message.success('操作成功')
                    }
                })
            }
        }
    }
</script>

<style lang="less" scoped>
.indexDetail{
    margin: 10px 0;
    padding: 20px;
    background-color: #fff;
    .top{
        padding: 10px;
        display: flex;
        align-items: center;
        &>div{
            padding: 0 30px;
        }
    }
    .banner{
        padding: 0 30px;
    }
    .box{
        padding: 20px 60px;
    }
}
</style>